<input type="hidden"  id="qn_url" value="{:url('gallery/uploads')}">
<input type="hidden"  id="domain_url" value="{$domain_url}">
<script>
    layui.use(['layer', 'upload','jquery','laytpl','element'], function(){
        var a = layui.jquery,
        admin_map = a("#admin_map").val(),
        qn_url = a("#qn_url").val()
        domain_url = a("#domain_url").val(),
        fileName = '',
        tc = '#GalleryTemplate',
        tcb = '#Gallery_',
        k = 'openMaterialDraggable',
        l = a('.' + k),
        layer = layui.layer,
        laytpl = layui.laytpl,
        element = layui.element,
        upload = layui.upload;  
        const common = {
            request: function (url, data, type, reload = 1) {
                common.load();
                var btn = $(this);
                btn.attr('disabled', true);
                $.ajax({
                    type: type ? type : 'POST',
                    url: url,
                    data: data,
                    dataType: "json",
                    success: function (data) {
                        layer.closeAll();
                    },
                    error(e) {
                        layer.closeAll();
                    }
                });
                return false;
            },
            load: function (text = '加载中....') {
                layer.msg('<div><i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i> ' + text + '', {
                    shade: 0.4,
                    time: 0
                });
            },
            loadUpload: function () {
                layer.msg('' + $('.progress').html() + '', {
                    shade: 0.4,
                    time: 0
                });
            },
        };
        $("body").on('click', '.openShowImg', function () {
            //图片预览
            const value = a(this).attr("data-value").split(','), data = [];
            for (i in value) {
                data.push({src: value[i]});
            }
            layer.photos({photos: {"data": data, "start": 0}, anim: 5, closeBtn: 1});

        });
        $("body").on('click', '.video-del', function () {
            
            var v = a(this).attr('data-val'), p = a(this).parents('.' + k).find('.drop-value'),thisl=this;
            layer.confirm('确定要删除吗？删除文件将无法恢复！', {title: '请确认'}, function (index) {
                console.log(v);
                common.request('{:url("gallery/deleteVideo")}', {
                    url: v,
                }, 'POST');
                var val = p.val().split(',');
                var index = val.indexOf(v);
                index > -1 ? val.splice(index, 1) : '';
                p.val(val.join(','))
                a(thisl).parents('.material-preview').remove();
            })
        });
        upload.render({
            elem: '.uploadVideoQiNiu'
            , url: qn_url
            , auto: false
            ,accept: 'file'
            ,choose: function (obj) {
                element.progress('progress', '0%')
                obj.preview(function (index, file, result) {
                    fileName = Date.now() + "_" + file.name;
                    obj.upload(index, file)
                });
                common.loadUpload();
            },
            before: function (obj) {
                var ccc = Object.values(obj.getChooseFiles()).length;
                var box = a(this.item), n = box.attr('data-n'), c = box.attr('data-c'),
                    v = a("#checkGallery_" + n).val() ? a("#checkGallery_" + n).val().split(',') : [];

                if(ccc + v.length > c){
                    layer.msg('最多上传' + c + '个视频');
                }

                if (ccc > c) {
                    layer.msg('最多上传' + c + '个视频');
                    return false;
                }

                if (c > 1) {
                    if (v.length >= c) {
                        layer.msg('最多上传' + c + '个视频');
                        return false;
                    }
                }
                element.progress('progress', '0%')
                layer.msg('' + $('.progress').html() + '', {
                    shade: 0.4,
                    time: 0
                });
            },
            progress: function (n, elem, res, index) {
                element.progress('progress', n + '%');
            },
            done: async function (data, index, upload) {
                common.request('{:url("gallery/addVideo")}', {
                    title: fileName,
                    key: data.data.key,
                    cate: 2
                }, 'POST');
                var box = a(this.item),
                    n = box.attr('data-n'),
                    dval = box.attr('data-d'),
                    videourl = data.data.url,
                    ty = box.attr('data-t'),
                    types=box.attr('data-types'),
                    c = parseInt(box.attr('data-c')),
                    v = a("#checkGallery_" + n).val() ? a("#checkGallery_" + n).val().split(',') : [],
                    d = a("#checkDuration_" + dval).val() ? a("#checkDuration_" + dval).val().split(',') : [],
                    de=[],
                    t = a(tc + ty).html();
                c === 1 ? v = [videourl] : v.push(videourl);
            
                setTimeout(() => {
                    for (let index = 0; index < v.length; index++) {
                        var videoDuration = $(`#uploadVideo_${index}`)[0].duration;
                        d.push(videoDuration);
                    }
                    a("#checkDuration_" + dval).val(d.join(','));
                },1000)
                laytpl(t).render({data: v, name: n,dname:dval,duration:d,types:types}, function (html) {
                    a(tcb + n).html(html);
                });
                layer.closeAll();
            },
            error: function () {
                layer.closeAll();
                layer.msg('上传失败');
            }
        });
    });
</script>